<template>
  <div class="container">
    <div class="head">
      <h1>卷心菜后台数据监控中心</h1>
    </div>
    <div class="f1">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-office-building"></i>
              <span class="n_font">注册公司总数</span>
            </div>
            <div class="count-gray">5,880</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>128%</span>
              </div>
              <span class="n_font">较上月</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-office-building"></i>
              <span class="n_font">活跃公司总数</span>
            </div>
            <div class="count-gray">3,282</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>8%</span>
              </div>
              <span class="n_font">较上月</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-user"></i>
              <span class="n_font">注册用户总数</span>
            </div>
            <div class="count-red">56,841</div>
            <div>
              <div class="red">
                <i class="el-icon-caret-bottom"></i>
                <span>-12%</span>
              </div>
              <span class="n_font">较上月</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-user-solid"></i>
              <span class="n_font">活跃用户总数</span>
            </div>
            <div class="count-gray">8,879</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>32%</span>
              </div>
              <span class="n_font">较上月</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-monitor"></i>
              <span class="n_font">当日PC端PV量</span>
            </div>
            <div class="count-red">8,879</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>32%</span>
              </div>
              <span class="n_font">较上月</span>
            </div>
          </div> </el-col
        ><el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-mobile-phone"></i>
              <span class="n_font">当日移动端PV量</span>
            </div>
            <div class="count-red">148,879</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>58%</span>
              </div>
              <span class="n_font">较上周</span>
            </div>
          </div> </el-col
        ><el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-sell"></i>
              <span class="n_font">APP总下载量</span>
            </div>
            <div class="count-gray">7,412</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>43%</span>
              </div>
              <span class="n_font">较上月</span>
            </div>
          </div> </el-col
        ><el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="n_title">
              <i class="el-icon-chat-dot-round"></i>
              <span class="n_font">当前在线人数</span>
            </div>
            <div class="count-red">5,514</div>
            <div>
              <div class="green">
                <i class="el-icon-caret-top"></i>
                <span>32%</span>
              </div>
              <span class="n_font">较昨日</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="line"></div>
    <div class="echart">
      <div id="d1"></div>
      <div id="d2"></div>
      <div id="d3"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowOption: {
        visualMap: [
          {
            show: false,

            type: "continuous",

            seriesIndex: 0,

            min: 0,

            max: 400,
          },
        ],

        title: {
          left: "left",

          text: "电量消耗实时统计",
        },

        tooltip: {
          trigger: "axis",

          formatter: function (params) {
            params = params[0];

            vardate = new Date(params.name);

            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },

          axisPointer: {
            animation: false,
          },
        },

        grid: {
          top: "15%",

          bottom: "10%",
        },

        xAxis: {
          type: "time",

          splitLine: {
            show: false,
          },

          triggerEvent: true,
        },

        yAxis: {
          type: "value",

          boundaryGap: [0, "100%"],

          max: 100,

          splitLine: {
            show: false,
          },
        },

        series: [
          {
            type: "line",

            showSymbol: false,

            hoverAnimation: false,

            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.drawLine(), this.drawPie(), this.drawL();
  },
  methods: {
    drawL() {
      // let dataList = []
      // setInterval(() => {
      // let n = Math.floor(Math.random() * 10000)
      // dataList.push(n)
      const myChart = this.$echarts.init(document.getElementById("d1"));
      myChart.setOption({
        title: {
          text: "访问量实时流量监控",
        },
        tooltip: {
          trigger: "axis",
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            stack: "Total",
            data: [
              8000, 524, 8888, 1651, 1244, 9984, 665, 12354, 15521, 8874, 7122,
              4524,
            ],
          },
        ],
      });
      // }, 2000)
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("d2"));
      myChart.setOption({
        title: {
          text: "岗位浏览量排行",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "互联网/IT",
            "通信/硬件",
            "商务/贸易",
            "金融/法务",
            "生产/制造",
            "通用职能",
            "服务业",
            "房产/建筑",
            "设计/传媒",
            "教育/培训",
          ],
        },
        series: [
          {
            name: "浏览量",
            type: "bar",
            data: [
              18203, 23489, 29034, 84970, 31744, 63023, 11240, 15541, 11230,
              18410,
            ],
          },
        ],
      });
    },
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById("d3"));
      myChart.setOption({
        title: {
          text: "生源地信息",
          top: 20,
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
          },
        },
        series: [
          {
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "上海" },
              { value: 38, name: "广州" },
              { value: 32, name: "北京" },
              { value: 30, name: "成都" },
              { value: 28, name: "深圳" },
              { value: 26, name: "杭州" },
              { value: 22, name: "南京" },
              { value: 18, name: "武汉" },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style scoped src='../assets/css/home.css'>
</style>